import React from 'react'
import styled from 'styled-components'

import Flex from '../components/Flex'
import BaseButton from '../components/Button'
import Fixed from '../components/Fixed'
import Color from '../components/Color'

import Icon from '../components/Icon'
import IconStop from '../components/Icon/stop.svg'
import IconPlay from '../components/Icon/play.svg'
import IconDelete from '../components/Icon/delete.svg'
import IconArrowRight from '../components/Icon/arrow-double-right.svg'

import { Pre } from './common/'

const ConsoleArea = ({
    handleClearConsole,
    handleInputEnd,
    toggleSidebar,
    handleRunCode,
    consoles,
    isPlaying,
    showInput,
    inputValue,
    handleInputChange,
    ...others
}) => {
    return (
        <Container {...others} auto column>
            <ToggleBtn onClick={() => toggleSidebar()}>
                <Icon size={30} src={IconArrowRight} pointer />
            </ToggleBtn>
            <BtnWrap center>
                <Button
                    type="secondary"
                    color="white"
                    onClick={() => handleRunCode()}
                >
                    <Icon size={20} src={isPlaying ? IconStop : IconPlay} />&nbsp;{isPlaying
                        ? '停止'
                        : '运行'}
                </Button>
                <Button
                    type="secondary"
                    color="white"
                    left={20}
                    onClick={() => handleClearConsole()}
                >
                    <Icon size={20} src={IconDelete} />&nbsp;清除
                </Button>
            </BtnWrap>
            <ConsoleOutput auto>
                <Pre>
                    {consoles}
                    {showInput && (
                        <TextAreaWrap>
                            <TextArea
                                onKeyUp={e => handleInputEnd(e)}
                                value={inputValue}
                                onChange={e => handleInputChange(e)}
                            />
                        </TextAreaWrap>
                    )}
                </Pre>
            </ConsoleOutput>
        </Container>
    )
}

export default ConsoleArea

const Container = styled(Flex)`
    background: ${Color.consoleBg};
    position: relative;
    overflow-x: hidden;
`

const TextAreaWrap = styled(Flex)`
    color: rgb(255, 255, 255);
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    cursor: text;
    font-size: 18px;
`

const TextArea = styled('textarea').attrs({
    autoComplete: 'off',
    autoCapitalize: 'off',
    autoCorrect: 'off',
    spellCheck: false,
    autoFocus: 'autofocus',
})`
    font-size: inherit;
    font-family: inherit;
    color: rgb(255, 255, 255);
    border: none;
    background: inherit;
    width: 100%;
    resize: none;
    padding: 0;
    word-wrap: break-word;
    word-break: break-all;
    min-height: 25px;
    &:focus {
        outline: none;
    }
`

const ConsoleOutput = styled(Flex).attrs({
    id: 'console-output',
})`
    position: relative;
    padding: 20px;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 2px;
    color: white;
    font-size: 18px;
`

export const Button = styled(BaseButton)`
    min-width: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: ${({ left }) => (left ? left + 'px' : 0)};
    &:hover {
        opacity: 0.65;
        transition: all 0.4s;
    }
    &:focus {
        outline: none;
    }
`

const BtnWrap = styled(Flex)`
    margin-top: 22px;
    height: 40px;
    flex: 0 0 40px;
    width: 100%;
`

const ToggleBtn = styled(Fixed)`
    position: absolute;
    left: 10px;
    width: 50px;
    bottom: auto;
    cursor: pointer;
`



// WEBPACK FOOTER //
// ./src/containers/ConsoleArea.js